<script setup>
import { ref } from 'vue'
// import TheWelcome from '../components/TheWelcome.vue'
import Test1 from '../components/Test-1.vue'
import Test2 from '../components/Test-2.vue'
import Test3 from '../components/Test-3.vue'
import Test4 from '../components/Test-4.vue'
import BlogPost from '../components/Test-5.vue'
import AlertBox from '../components/AlertBox.vue'
import Tab from '../components/test6/Tab.vue'
import Slot1 from '../components/Slot-1.vue'
import Slot2 from '../components/Slot-2.vue'
import Mouse from '../components/Mouse.vue'
import FetchTest from '../components/FetchTest.vue'
import TransitionTest from '../components/TransitionTest.vue'
import TransitionGroupTest from '../components/TransitionGroupTest.vue'
import TeleportTest from '../components/TeleportTest.vue'

const blogs = ref([
  { id: 1, title: 'My journey with Vue' },
  { id: 2, title: 'Blogging with Vue' },
  { id: 3, title: 'Why Vue is so fun' }
])
const postFontSize = ref(1)
</script>
<template>
    <!-- <TheWelcome /> -->
    <TransitionTest />
    <TransitionGroupTest />
    <!-- i18n插件 -->
    <h1>{{ $translate('greetings.hello') }}</h1>
    <h1>Tooltips with vue 3 Teleport</h1>
    <div>
      <TeleportTest />
    </div>
    <Test1 />
    <Test2 />
    <Test3 />
    <Test4 />
    <div :style="{fontSize: postFontSize + 'em'}">
      <BlogPost v-for="blog in blogs"
        :key="blog.id"
        :title="blog.title"
        @enlarge-text="postFontSize += 0.1"/>
    </div>
    <AlertBox>Something bad here.</AlertBox>
    <Tab />
    <Slot1 v-slot="slotProp">
      {{ slotProp.text }} {{ slotProp.count }}
    </Slot1>
    <Slot1 v-slot="{ text, count }">
      {{ text }} {{ count}}
    </Slot1>
    <Slot2 :api-url="url" :page-size="10">
      <template #item="{ body, username, links }">
        <div class="item">
          <p>{{ body }}</p>
          <div class="meta">
            by {{ username }} | {{ links }} links
          </div>
        </div>
      </template>
    </Slot2>
    <Mouse />
    <br/>
    <FetchTest />
</template>